<template>
    <div class="p-2 container">
      <!-- 查看访客申请邀约对话框 -->
        <el-form  ref="visitorApplyInviteFormRef" :model="form" :rules="rules" label-width="120px"  :inline="true" >
        <div style="margin-bottom:10px; border-bottom: 1px solid #dcdfe6;">
            <div class="detail-title">基础信息</div>
          </div>
          <el-form-item label="申请单号" prop="remark">
            <p>{{visitorApplyInviteInfo.applyCode}}</p>
          </el-form-item>
          <el-form-item label="申请时间" prop="remark">
            <p>{{visitorApplyInviteInfo.applyTime}}</p>
          </el-form-item>
          <el-form-item label="申请人" prop="equipmentTypeName">
            <p>{{visitorApplyInviteInfo.createName}}</p>
          </el-form-item>
          <el-form-item label="来访地点" prop="equipmentCode">
            <p>A栋602</p>
          </el-form-item>
          <el-form-item label="来访日期" prop="nodeId">
            <p>{{ parseTime(visitorApplyInviteInfo.startTime, '{y}-{m}-{d}')}} ~ {{parseTime(visitorApplyInviteInfo.endTime, '{y}-{m}-{d}')}} </p>
          </el-form-item>
          <el-form-item label="访客类型" prop="position">
            <p>{{form.visitorType}}</p>
          </el-form-item>
          <el-form-item label="访客事由" prop="statusName">
            <p>{{visitorApplyInviteInfo.visitReason}}</p>
          </el-form-item>
          <br>
          <el-form-item label="来访说明" prop="remark">
            <p>{{visitorApplyInviteInfo.remark}}</p>
          </el-form-item>
          <div style="margin-bottom:10px; margin-top: 30px; border-bottom: 1px solid #dcdfe6;">
            <div class="detail-title">访客信息</div>
          </div>
            <el-table  v-loading="loading"  :data="visitorUserList" prop="equipmentId">
              <el-table-column label="序号" type="index" width="55" align="center" />
              <el-table-column label="姓名" align="center" prop="visitorName" show-overflow-tooltip />
              <el-table-column label="性别" align="center" prop="gender" show-overflow-tooltip >
                <template #default="scope">
                  {{ scope.row.gender == 1 ? '男' : '女' }}
                </template>
              </el-table-column>
              <el-table-column label="手机号" align="center" prop="telephone" show-overflow-tooltip />
              <el-table-column label="描述" align="center" prop="remark" show-overflow-tooltip />
              <el-table-column label="是否未成年" align="center" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.visitorDerageFlag == 1 ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column label="访客单位" align="center" prop="visitorDeptName" show-overflow-tooltip />
              <el-table-column label="访客车牌号" align="center" prop="licensePlateNumber" show-overflow-tooltip />
            </el-table>
            <div style="margin-top:30px; margin-bottom:40px; border-bottom: 1px solid #dcdfe6;">
              <div class="detail-title">审批信息</div>
            </div>
            <div style="height: 300px; max-width: 600px; margin-left: 30px;">
              <el-steps direction="vertical" :active="20">
              <template v-for="item in queryInfo">
                <el-step v-if="item.status == 0"  title="发起申请" :description="item.auditUserName" />
                <el-step v-if="item.status == 1"  title="通过" :description="item.auditUserName" />
                <el-step v-if="item.status == 2"  title="驳回" :description="item.auditUserName" />
              </template>
            </el-steps>
            </div>
        </el-form>
          <div class="dialog-footer" style="float: right;">
            <el-button @click="cancel">取 消</el-button>
          </div>
    </div>
  </template>

  <script setup name="visitorApplyInvite" lang="ts">
  import {
    getvisitorApplyInvite,
    listvisitorApplyInvite
  } from '@/api/access/visitor/visitor-apply-invite';
  import { userInfoVo, visitorApplyInviteForm, visitorApplyInviteQuery, visitorApplyInviteVO } from '@/api/access/visitor/visitor-apply-invite/types';
  import { listUserInfo } from '@/api/access/user/user-info';
  import { visitorAuditForm } from '@/api/access/visitor/visitor-audit/types';
  import { listparkBuildingRoom } from '@/api/park/park-building-room';
  import useUserStore from '@/store/modules/user';
  import { listUser } from '@/api/system/user';
  import { UserVO } from '@/api/system/user/types';
  import request from '@/utils/request';



  const { proxy } = getCurrentInstance() as ComponentInternalInstance;

  const queryInfo = ref([]);

  const props = defineProps({
  visible: Boolean,
  title: String,
  visitorApplyInviteInfo: Object,
  rules: Object,
  visitorUserList: Array,
});
const emit = defineEmits(['close']);

  const visitorApplyInviteList = ref<visitorApplyInviteVO[]>([]);
  const loading = ref(true);
  const total = ref(0);
  const areaUserList = ref<userInfoVo[]>([]);
  const userList = ref<UserVO[]>([]);
  const visitorUserList = ref([]);
  const buildingRoomList = ref([]);
  const visitorApplyInviteFormRef = ref<ElFormInstance>();

  //路由参数
  const routeParams = ref<Record<string, any>>({});
  const dialog = reactive<DialogOption>({
    visible: false,
    title: '',
    audit: false
  });

  const initFormData: visitorApplyInviteForm = {
    visitorApplyInviteId: undefined,
    remark: undefined,
    type: undefined,
    visitReason: undefined,
    inviteUserId: undefined,
    startTime: undefined,
    endTime: undefined,
    visitorType: undefined,
    visitorList: [],
    status: undefined,
    applyUserId: undefined
  };

  const initAuditFormData: visitorAuditForm = {
    visitorApplyInviteId: undefined,
    remark: undefined,
    auditUserId: undefined
  };

  const data = reactive<PageData<visitorApplyInviteForm, visitorApplyInviteQuery>>({
    form: { ...initFormData },
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      type: undefined,
      visitReason: undefined,
      inviteUserId: undefined,
      startTime: undefined,
      endTime: undefined,
      params: {}
    },
    rules: { },
  });

  const { queryParams, form, rules} = toRefs(data);

  /***获取系统用户***/
  const getUserList = async () => {
    loading.value = true;
    const res = await listUser();
    userList.value = res.rows;
    loading.value = false;
  };


  /** 查询访客申请邀约列表 */
  const getList = async () => {
    loading.value = true;
    const res = await listvisitorApplyInvite(queryParams.value);
    visitorApplyInviteList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  };

  /** 获取园区用户列表 */
  const getAreaUserList = async () => {
    // TODO: 获取园区用户列表
    loading.value = true;
    const res = await listUserInfo(queryParams.value);
    areaUserList.value = res.rows;
    loading.value = false;
  };

  /**
   * 获取房间
   */
  const getBuildingRoom = async ()=> {
    const res = await listparkBuildingRoom({type: 4});

    buildingRoomList.value = res.rows

    console.log('获取房间：', res)
  }

  const detailInfo = async (visitorApplyInviteInfo) => {
    const _visitorApplyInviteId = visitorApplyInviteInfo?.visitorApplyInviteId ;
//   const res = await getvisitorApplyInvite(_visitorApplyInviteId);
//   console.log('获取访客信息：', res)

//   visitorApplyInviteInfo.value = res.data

//   Object.assign(form.value, res.data);

  let visitorUserRes = await request({ url: '/visitor/visitor-user/list', method: 'get', params: { visitorApplyInviteId: _visitorApplyInviteId } });
  console.log('获取申请单访客信息：', visitorUserRes);

  visitorUserList.value = visitorUserRes.rows

  let visitorAuditInfo = await request({ url: '/visitor/visitor-audit/queryInfo', method: 'get', params: { visitorApplyInviteId: _visitorApplyInviteId } });
  console.log('查看访客审批详情：', visitorAuditInfo);

  queryInfo.value = visitorAuditInfo.data;
  };

   /** 取消按钮 */
   const cancel = () => {
    reset();
    emit('close')
    // dialog.visible = false;
  };
  // let visitorAuditInfo = await request({ url: '/visitor/visitor-audit/queryInfo', method: 'get', params: { visitorApplyInviteId: _visitorAuditId } });
  // console.log('查看访客审批详情：', visitorAuditInfo);

  // queryInfo.value = visitorAuditInfo.data;

  /** 表单重置 */
  const reset = () => {
    form.value = { ...initFormData };
    visitorApplyInviteFormRef.value?.resetFields();
  };

  onMounted(() => {
    getList();
    getAreaUserList();
    getBuildingRoom();
    getUserList();
    detailInfo(props.visitorApplyInviteInfo);
    // nextTick(async () => {
    //   routeParams.value = proxy.$route.query;
    //   console.log('路由参数：', routeParams.value);
    // })
  });
  </script>
  <style lang="scss" scoped>
  :deep(.el-card__header) {
    height: 60px;
  }
  :deep(.el-card__body) {
    height: calc(100% - 60px);
  }
  :deep(.pagination-container) {
    margin-top: 0;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .border-box {
    height: 600px;
    padding-top: 20px;

    border: 1px solid #0b0a0a;
    border-radius: 5px;
  }
  .el-input {
    width: 300px;
  }
  p {
      width: 240px;
      padding: 0;
      margin: 0;
    }
      .detail-title {
      margin-bottom: 10px;
      margin-left: 15px;
      border-left: 6px solid #409eff;
      padding-left: 10px;

    }
  </style>
